<template>
  <div class="time-play">
    <a-row class="time-play">
      <a-col :span="16" style="height: 80px">
        <div class="time-main">
          <div class="time-vessel">
            <div class="time-control" :class="playAction" @click="play"></div>
          </div>
          <div class="prev-vessel">
            <div class="prev" :class="{ disabled: !prevBtn }" @click="pagePrev">
              <img src="@/assets/image/arrow-left.png" alt="" />
            </div>
          </div>
          <div class="progress-vessel" ref="progresssVessel">
            <div class="progress-inner" :style="{ transform: 'translateX(-' + translate + 'px)' }" ref="progressInner">
              <div class="progress-content" ref="progressCon" @click="clickProgress">
                <div class="progress-bar" :style="{ width: width + 'px' }">
                  <p class="bigDot">
                    <span class="dot"> </span>
                  </p>
                </div>
              </div>
              <div class="progress-time">
                <div class="time-item" v-for="(item, index) in data" :key="index">
                  {{ item?.date }}
                </div>
              </div>
            </div>
          </div>
          <div class="next-vessel">
            <div class="next" :class="{ disabled: !nextBtn }" @click="pageNext">
              <img src="@/assets/image/arrow-right.png" alt="" />
            </div>
          </div>
          <div class="time-unit">日</div>
          <div class="progress-speed">
            <p
              :class="{ active: speedActive === index }"
              v-for="(item, index) in speedConfig"
              :key="index"
              @click="changeSpeed(item.value, index)"
            >
              {{ item.label }}
            </p>
          </div>
        </div>
      </a-col>
      <a-col :span="8" style="height: 80px">
        <div class="select-time">
          <a-range-picker v-model="time" @change="ChangeTime" style="width: 250px" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, defineEmits, toRefs, onBeforeUnmount } from 'vue'
import { useHealthStore } from '@/store/modules/health'
import { apiHealth } from '@/api/health'
const healthStore = useHealthStore()
const { timeAxisId } = toRefs(healthStore)
const data = ref([])
const translate = ref(0)
const width = ref(0)
const speed = ref(1000)
const playAction = ref('play')
const timer = ref()
const time = ref([])
const progressCon = ref(null)
const progresssVessel = ref(null)
const progressInner = ref()
const speedActive = ref(0)
const ind = ref(0)
const nextBtn = ref(false)
const prevBtn = ref(false)
const speedConfig = ref([
  {
    label: '1X',
    value: 1000
  },
  {
    label: '2X',
    value: 500
  },
  {
    label: '4X',
    value: 250
  }
])
const emit = defineEmits(['changeDataSource'])
const clickProgress = (e) => {
  stopPlay()
  width.value = e.offsetX
  ind.value = Math.floor(width.value / 100)
  emit('changeDataSource', data.value[ind.value]?.data?.[0])
  if (playAction.value === 'pause') {
    startPlay()
  }
}
const play = () => {
  if (data.value.length > 0 && playAction.value === 'play') {
    playAction.value = 'pause'
    if (width.value >= progressCon.value.clientWidth) {
      initPlay()
    } else {
      startPlay()
    }
  } else {
    playAction.value = 'play'
    stopPlay()
  }
}
const initPlay = () => {
  ind.value = 0
  width.value = 0
  translate.value = 0
  playAction.value === 'pause' && startPlay()
}
const startPlay = () => {
  timer.value = setInterval(() => {
    if (progresssVessel.value.clientWidth - (width.value - translate.value) <= 100) {
      translate.value += progresssVessel.value.clientWidth / 2
      if (translate.value + progresssVessel.value.clientWidth > progressInner.value.clientWidth) {
        translate.value = progressInner.value.clientWidth - progresssVessel.value.clientWidth
      }
    }
    emit('changeDataSource', data.value[ind.value]?.data?.[0])
    width.value = Math.floor(width.value / 100) * 100 + 100
    ind.value++
    if (width.value >= progressCon.value.clientWidth) {
      width.value = progressCon.value.clientWidth
      playAction.value = 'play'
      stopPlay()
    }
  }, speed.value)
}
const stopPlay = () => {
  playAction.value = 'play'
  clearInterval(timer.value)
  timer.value = null
  console.log('stopPlay')
}
const pagePrev = () => {
  prevBtn.value = true
  translate.value -= progresssVessel.value.clientWidth
  if (translate.value < 0) {
    translate.value = 0
    prevBtn.value = false
  }
}
const pageNext = () => {
  nextBtn.value = true
  translate.value += progresssVessel.value.clientWidth
  console.log(translate.value, progresssVessel.value.clientWidth)
  if (translate.value + progresssVessel.value.clientWidth > progressInner.value.clientWidth) {
    translate.value = progressInner.value.clientWidth - progresssVessel.value.clientWidth
    nextBtn.value = false
  }
}
const changeSpeed = (data, index) => {
  let flag = false
  if (playAction.value === 'pause') {
    flag = true
  }
  speed.value = data
  speedActive.value = index
  stopPlay()
  if (flag) {
    playAction.value = 'pause'
    startPlay()
  }
}
const ChangeTime = (dateString) => {
  initPlay()
  apiHealth.getTimeAxisData(timeAxisId.value, dateString?.[1], dateString?.[0]).then((res) => {
    if (+res.code === 200) {
      data.value = res.data
    }
  })
}
// watch(timeAxisId, () => {
//   ChangeTime()
// })
onBeforeUnmount(() => {
  clearInterval(timer.value)
  timer.value = null
})
</script>

<style lang="less" scoped>
.time-play {
  width: 100%;
  height: 80px;
  background-color: rgba(11, 48, 71, 0.5);
  border-radius: 5px;
  display: flex;
  .select-time {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .time-main {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    .progress-vessel {
      flex: 1;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      .progress-inner {
        position: absolute;
        left: 8px;
        top: 1px;
        height: 100%;
        padding-top: 60px;
        // margin-left:29px;
        box-sizing: border-box;
        .progress-content {
          position: absolute;
          top: 36px;
          width: 100%;
          height: 6px;
          background: #2d3d44;
          border-radius: 4px;
          cursor: pointer;
          .progress-bar {
            position: absolute;
            height: 6px;
            border-radius: 4px;
            background: #6674a4;
            overflow: visible !important;
            -webkit-transition: width 0.3s;
            -moz-transition: width 0.3s;
            -ms-transition: width 0.3s;
            -o-transition: width 0.3s;
            transition: width 0.3s;
            .bigDot {
              pointer-events: none;
              width: 19px;
              height: 19px;
              background: rgba(89, 91, 146, 0.5);
              border-radius: 10px;
              position: absolute;
              right: -12px;
              bottom: -7px;
              margin: 0;
              text-align: center;
              line-height: 19px;
              .dot {
                display: inline-block;
                width: 9px;
                height: 9px;
                background: #6674a4;
                border-radius: 5px;
              }
            }
          }
        }
        .progress-time {
          display: flex;
          color: #fff;
          .time-item {
            width: 100px;
            text-align: center;
            border-left: 1px solid #fff;
            box-sizing: border-box;
            &:last-of-type {
              border-right: 1px solid #fff;
            }
          }
        }
      }
    }
    .time-vessel {
      width: 40px;
      position: relative;
      .time-control {
        position: absolute;
        left: 20px;
        top: 32px;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      .play {
        &::after {
          content: '';
          border-left: 13px solid #4ec3f2;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          display: inline-block;
        }
      }
      .pause {
        &::after {
          content: '';
          width: 4px;
          height: 18px;
          margin-left: 4px;
          background-color: #4ec3f2;
          display: inline-block;
        }
        &::before {
          content: '';
          width: 4px;
          height: 18px;
          background-color: #4ec3f2;
          display: inline-block;
        }
      }
    }
    .prev-vessel,
    .next-vessel {
      width: 40px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .prev,
    .next {
      width: 16px;
      height: 16px;
      cursor: pointer;
      background: #4ec3f2;
      border-radius: 10px;
      line-height: 15px;
      text-align: center;
    }
    .disabled {
      // pointer-events: none;
    }
    .time-unit {
      width: 40px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-weight: 500;
      color: #4ec3f2;
    }
    .progress-speed {
      width: 100px;
      display: flex;
      align-items: center;
      color: #fff;
      p {
        flex: 1;
        cursor: pointer;
      }
      .active {
        color: #4ec3f2;
      }
    }
  }
}
</style>
